/*eslint-disable*/
import React, {useState, useRef, useEffect} from 'react'
import './index.scss'

const DATA = [{name: 'tab1', key: 1}, {name: 'tab2', key: 2}]
export default function Tabs(props) {
  const {
    activeKey = 0,
    data = DATA,
    onChange,
    className = '',
    renderItem,
    style = {},
  } = props

  const [activeIndex, setActiveIndex] = useState(activeKey)
  const ulRef = useRef()
  const handleClick = i => {
    setActiveIndex(i)
    onChange && onChange(data[i])
  }
  const handleTouchMove = (e) => {
    ulRef.current.style.transform = ''
  }

  useEffect(() => {
    setActiveIndex(activeKey)
  }, [activeKey])

  return (
    <ul className={`tabs ${className}`} style={style} onTouchMove={handleTouchMove} ref={ulRef}>
      {data.map((d, i) => (
        <li
          key={d.name}
          onClick={() => handleClick(i)}
          className={i === activeIndex ? 'active' : ''}
        >
          {renderItem ? renderItem(d) : d.name}
        </li>
      ))}
    </ul>
  )
}
